/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
function Trim(str) {
    var str = str.replace(/[ ]/g, ""); //去空额
    return str.replace(/(^\s*)|(\s*$)/g, "");

}

var aqiData = {};

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
    var city = document.getElementById('aqi-city-input').value;
    var air = document.getElementById('aqi-value-input').value;
    var regCity = /^[\u4e00-\u9fa5a-zA-Z\/\(\)]+$/;
    if (!regCity.test(Trim(city))) {
        alert("请输入中英文字符");
        return false;
    }
    var regData = /[0-9]/;
    if (!regData.test(Trim(air))) {
        alert("请输入整数");
        return false;
    }
    aqiData[city] = air;
}
/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
    var table = document.getElementById('aqi-table');
    var html = '<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>';
    for (const e in aqiData) {
        console.log(e + ' ,' + aqiData[e]);
        html += '<tr><td>' + e + '</td><td>' + aqiData[e] + '</td><td><button>删除</button></td></tr>';

    }
    table.innerHTML = html;
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
    addAqiData();
    renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(e) {
    // do sth.
    // find city -> aqiData
    var city = e.target.parentNode.parentNode.firstChild.innerHTML;
    delete aqiData[city];
    // del the city
    renderAqiList();
}

function init() {
    var btn = document.getElementById("add-btn");
    btn.addEventListener("click", addBtnHandle);
    // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
    var table = document.getElementById('aqi-table');
    table.addEventListener("click", delBtnHandle);
    // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数

}

init();